CSS animatie - definitie
Bewegende objecten trekken de aandacht van het menselijke brein. Je kans inspelen op deze natuurlijke reflex om de aandacht te vestigen op belangrijke onderdelen van je website door goed gekozen animatie aan je website of app toe te voegen. Als het goed gedaan is, kunnen animaties een waardevolle interactie en feedback toevoegen, evenals de emotionele ervaring, vreugde, verdriet, woede, verbeteren.
Waarin verschillen animaties van overgangen?
- Net zoals voor overgangen, kan je ook voor een animatie een start en einde definiëren maar je kan kan voor animaties een willekeurig aantal tussenliggende toestanden maken voor geavanceerde effecten.
- Een animatie kan worden geactiveerd net zoals een overgang, maar het kan ook afgespeeld worden zonder trigger, bijvoorbeeld onmiddellijk na het laden van de pagina.
- terwijl een overgang alleen reageren zal wanneer een trigger wordt geactiveerd of gedeactiveerd, kan een animatie in een lus een eindig of oneindig aantal keer afgespeeld worden.
- Een animatie kan vooruit of achteruit afgespeeld worden of alternerend tussen de twee.
- CSS Animatie is uitgebreider en moeilijker om te schrijven dan JavaScript... maar het is ontegenzeggelijk eenvoudiger dan vergelijkbare JavaScript-code.
Er zijn mensen die beweren dat animaties door JavaScript moeten worden gedaan, omdat ze gedragsmatig (behavioral) zijn. Dat zijn ze niet. De browser handelt alleen frames af tussen toestanden; de browser genereert de ontbrekende animatieframes zodat je dat niet zelf moet doen.
De bouwstenen van animaties
CSS animaties bestaan uit twee basis elementen:
- CSS animatie - keyframes
- Animation properties
Voorbeelden
- http://daneden.github.io/animate.css/
- Tim Evko, Building an Image Slider, September 17, 2014
2017-05-22 09:40:44